<route lang="json5">
{
  style: {
    navigationBarTitleText: '注册',
  },
}
</route>

<template>
  <view class="registerPage">
    <view class="pt-8">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            label="用户名"
            label-width="80px"
            prop="username"
            clearable
            v-model="model.username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <wd-input
            label="昵称"
            label-width="80px"
            prop="nickname"
            clearable
            v-model="model.nickname"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
          />
          <wd-input
            label="密码"
            label-width="80px"
            prop="password"
            show-password
            clearable
            v-model="model.password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <wd-input
            label="确认密码"
            label-width="80px"
            prop="confirmPassword"
            show-password
            clearable
            v-model="model.confirmPassword"
            placeholder="请输入确认密码"
            :rules="[
              { required: true, message: '请填写确认密码' },
              { required: false, validator: validatorPassword, message: '请填写确认密码' },
            ]"
          />
          <wd-input
            label="邮箱"
            label-width="80px"
            prop="email"
            clearable
            v-model="model.email"
            placeholder="请输入邮箱"
            :rules="[
              { required: true, message: '请填写邮箱' },
              { required: false, validator: validatorEmail, message: '请填写正确的邮箱' },
            ]"
          />
          <wd-input
            label="验证码"
            label-width="80px"
            prop="captcha"
            clearable
            v-model="model.captcha"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #suffix>
              <wd-button size="small" custom-class="button" @click="handleSendCaptcha">
                获取验证码
              </wd-button>
            </template>
          </wd-input>
        </wd-cell-group>
        <view class="flex justify-end px-4 pt-[10px] text-sm">
          <view>
            <wd-text type="primary" text="已有账号？去登录" @click="linkToLogin"></wd-text>
            <cus-wd-icon name="chevron-right" type="primary"></cus-wd-icon>
          </view>
        </view>
        <view class="footer m-4">
          <wd-button :round="false" @click="handleSubmit" block>注 册</wd-button>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
import CusWdIcon from '@/components/custom-wot-comp/CusWdIcon.vue'
import { registerCaptcha, register, RegisterDto } from '@/service/index/login'
import { useToast } from 'wot-design-uni'
const toast = useToast()

const model = reactive({
  username: '',
  nickname: '',
  password: '',
  confirmPassword: '',
  email: '',
  captcha: '',
})
const form = ref<FormInstance>()

const validatorEmail = (val: string) => {
  return /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(val)
}
const validatorPassword = () => {
  const { confirmPassword, password } = model
  if (confirmPassword === password) {
    return Promise.resolve()
  } else {
    return Promise.reject('两次密码不一致')
  }
}
const linkToLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}

const handleSendCaptcha = () => {
  const { email } = model
  form.value.validate('email').then(({ valid, errors }) => {
    if (valid) {
      registerCaptcha(email).then((res) => {
        toast.success(res.message)
      })
    } else {
      toast.error(errors[0].message)
    }
  })
}
const handleSubmit = () => {
  console.log('submit!', model)
  form.value!.validate().then(async ({ valid, errors }) => {
    if (valid) {
      const res = await register(model)
      if (res.statusCode === 200 || res.statusCode === 201) {
        toast.success('注册成功!')
        const { username, password } = model
        setTimeout(() => {
          uni.navigateTo({ url: `/pages/login/login?username=${username}&password=${password}` })
        }, 1000)
      }
    }
  })
}
</script>
